<template>
  <div>
    <el-table :data="media.streamPullInfo.chs"  style="width: 100%"  @row-click='handleCurrentChanges' highlight-current-row>
      <el-table-column  label="ID" width="120px" align="center">
        <template  slot-scope="scope">   
          <span>{{ scope.row.index  }}</span>
        </template> 
      </el-table-column>
      <el-table-column
       :label="$t('message.medias.url')"
       width="auto"
       align="center"
       prop="url">
      </el-table-column>
      <el-table-column  :label="$t('message.medias.reconnect')" width="120px" align="center">
        <template  slot-scope="scope">   
          <span>{{scope.row.reconnect? $t('message.yes') : $t('message.no') }}</span>
        </template> 
      </el-table-column>
      <el-table-column  :label="$t('message.medias.status')" align="center">
        <template  slot-scope="scope">   
          <span>{{ scope.row.status ? scope.row.status : 'idle'  }}</span>
        </template> 
      </el-table-column> 
      <el-table-column  :label="$t('message.medias.operation')" width="120px" fixed="right">
        <template  slot-scope="scope">   
          <el-button  type="text" v-show="scope.row.url" @click="onResetUrl(scope.row)">{{$t('message.medias.reset')}}</el-button>
        </template> 
      </el-table-column>   
    </el-table> 
    <setForm id="2" v-show="show">       
       <template slot="boxTop">{{$t('message.medias.streampull')}}</template>
          <template slot="boxMain">                
            <el-row>
           <el-col :span="4" class="col4">  
              <div class="span3">            
                <label>{{$t('message.medias.url')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.reconnect')}}</label>   
              </div>  
              <span v-if="system.isSpecialType">
                <div class="span3">            
                  <label>{{$t('message.medias.playAudio')}}</label>   
                </div>   
                <div class="span3">            
                  <label>{{$t('message.medias.playVideo')}}</label>   
                </div>      
              </span>                      
            </el-col>
            <el-col :span="20" class="col20a1">
              <div class="span17">
                <el-input  placeholder="" v-model="currentRow.url" ></el-input>
              </div>
              <div class="span17">
                <el-switch v-model="currentRow.reconnect"></el-switch>
              </div>
              <span v-if="system.isSpecialType">
                <div class="span17">
                  <el-switch v-model="currentRow.playAudio"></el-switch>
                </div>
                <div class="span17">
                  <el-switch v-model="currentRow.playVideo"></el-switch>
                </div>
              </span>
            </el-col>
          </el-row>
          <el-button  class="btnsave" @click="onSave">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
    <setForm id="3" v-show="show">       
      <template slot="boxTop">{{$t('message.medias.siteName')}}</template>
      <template slot="boxMain">                
        <el-row>
          <el-col :span="4" class="col4">  
            <div class="span3">            
              <label>{{$t('message.medias.preview')}}</label>   
            </div>                   
          </el-col>
          <el-col :span="20" class="col20a1">
            <canvas id="sitename"  width="576;" height="324"></canvas> 
          </el-col>
        </el-row>           
        <el-row>
          <el-col :span="4" class="col4">  
            <div class="span3">            
              <label>{{$t('message.medias.enable')}}</label>   
            </div>                    
            <div class="span3">            
              <label>{{$t('message.medias.fontsize')}}</label>   
            </div>                    
            <div class="span3">            
              <label>{{$t('message.medias.foregrounnd')}}</label>   
            </div>                    
            <div class="span3">            
              <label>{{$t('message.medias.horizontal')}}</label>   
            </div>                    
            <div class="span3">            
              <label>{{$t('message.medias.vertical')}}</label>   
            </div>                    
            <div class="span3">            
              <label>{{$t('message.medias.content')}}</label>   
            </div>                    
          </el-col>
          <el-col :span="20" class="col20a1">
            <div class="span17">
              <el-checkbox v-model="siteName.enable" >{{$t('message.medias.enable')}}</el-checkbox>
            </div>
            <div class="span17">
              <el-input v-model.number="siteName.fontSize" placeholder="" type="number"></el-input> 
            </div>
            <div class="span17">
              <el-select  v-model="siteName.foreColor">
                <el-option v-for="option in colorOptions" :key="option.value" :value="option.value" :label="option.text"></el-option>
              </el-select>   
            </div>
            <div class="span17">
              <el-slider v-model="siteName.pos.x" ></el-slider>
            </div>
            <div class="span17">
              <el-slider v-model="siteName.pos.y" ></el-slider>
            </div>
            <div class="span17">
              <el-input v-model="siteName.content" placeholder="" ></el-input>
            </div>
          </el-col>
        </el-row>
        <el-button  class="btnsave" @click="onSaveSiteName">{{$t('message.save')}}</el-button>
      </template>
    </setForm>
   
  </div>
</template>

<script>
import { api } from "../../../../libs/api";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import ebus from "../../../../libs/ebus";
import { mapState } from "vuex";
import topTable from "../../../../components/topTable";
export default {
  created() {
    ebus.emit("getStremPullInfo", this);
   
    // this.interval = setInterval(()=>{
    //   // ebus.emit("getInputDevInfo", this);
    // }, 3000)
    // // this.getLoopBack()
    // this.subStatus();
  },
  computed: {
    ...mapState(["media","system"]),
    curTopic() {
      if (this.system.isSpecialType) {
        return "mediaapp";
      } else {
        return "zhishen";
      }
    },
  },
  watch:{
    siteName: {
      handler: function(val, oldVal) {
        this.drawCanvas();
      },
      deep: true
    }
  },
  data() {
    return {
      currentRow: {
        index: 0,
        url: '',
        reconnect: false,
        playAudio: false,
        playVideo:false
      },
      show: false,
      siteName: {
        enable: false,
        fontSize: 0,
        foreColor: '',
        backColor: '',
        pos: {
          x: 0,
          y: 0
        },
        content: '',
        base: {
          h: 100,
          v: 100
        }
      },
      colorOptions: [
        {
          value: "#000000",
          text: "black"
        },
        {
          value: "#ffffff",
          text: "white"
        },
        {
          value: "#0000ff",
          text: "blue"
        },
        {
          value: "#a52a2a",
          text: "brown"
        },
        {
          value: "#808080",
          text: "gray"
        },
        {
          value: "#008000",
          text: "green"
        },
        {
          value: "#ff0000",
          text: "red"
        },
        {
          value: "#ffff00",
          text: "yellow"
        },
        {
          value: "#1abc9c",
          text: "turquoise"
        },
        {
          value: "#2ecc71",
          text: "emerald"
        },
        {
          value: "#3498db",
          text: "peter river"
        },
        {
          value: "#9b59b6",
          text: "amethyst"
        },
        {
          value: "#34495e",
          text: "wet asphalt"
        },
        {
          value: "#16a085",
          text: "green sea"
        },
        {
          value: "#27ae60",
          text: "nephritis"
        },
        {
          value: "#2980b9",
          text: "belize hole"
        },
        {
          value: "#8e44ad",
          text: "wisteria"
        },
        {
          value: "#2c3e50",
          text: "midnight blue"
        },
        {
          value: "#f1c40f",
          text: "sun flower"
        },
        {
          value: "#e67e22",
          text: "carrot"
        },
        {
          value: "#e74c3c",
          text: "alizarin"
        },
        {
          value: "#ecf0f1",
          text: "clouds"
        },
        {
          value: "#95a5a6",
          text: "concrete"
        },
        {
          value: "#f39c12",
          text: "orange"
        },
        {
          value: "#d35400",
          text: "pumpkin"
        },
        {
          value: "#c0392b",
          text: "pomegranate"
        },
        {
          value: "#bdc3c7",
          text: "silver"
        },
        {
          value: "#7f8c8d",
          text: "asbestos"
        }
      ],
    };
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    handleCurrentChanges(val, index) {
      for (var key in val) {
        this.currentRow[key] = val[key];
        this.siteName[key] = val[key];
      }
      this.show = true
      this.drawCanvas()
    },
    onSave() {
      if (
        this.errors.has(this.$t('message.medias.resolution')) ||
        this.errors.has(this.$t("message.medias.framerate")) 
      ) {
        return;
      }
      var option = {
        url: this.currentRow.url.trim(),
        reconnect: this.currentRow.reconnect        
      };
      if(this.system.isSpecialType) {
        option=Object.assign({}, option, {				  
          playAudio: this.currentRow.playAudio,
          playVideo: this.currentRow.playVideo        
				})
        
      }
      api.onRequest(
        `$method.$set.${this.curTopic}.streamPull.ch.` + this.currentRow.index + ".cfg",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
            ebus.emit('getStremPullInfo', this);   
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }    
          setTimeout(() => {
            ebus.emit('getStremPullInfo', this);   
          }, 2000);       
        }.bind(this)
      );
    },
    onResetUrl(row) {
      var option = {
        url: '',
        reconnect: false       
      };
      if(this.system.isSpecialType) {
        option=Object.assign({}, option, {				  
          playAudio: false,
          playVideo: false        
				})
        
      }
      api.onRequest(
        `$method.$set.${this.curTopic}.streamPull.ch.` + row.index + ".cfg",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
            this.show = false
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          ebus.emit('getStremPullInfo', this);   
          setTimeout(() => {
            ebus.emit('getStremPullInfo', this);   
          }, 2000);   
        }.bind(this)
      );
    },
    onSaveSiteName () {
      var option = {
        enable: this.siteName.enable,
        fontSize: this.siteName.fontSize,
        foreColor: this.siteName.foreColor,
        backColor: this.siteName.backColor,
        content: this.siteName.content,
        pos: this.siteName.pos,
        base: {
          h: 100,
          v: 100
        }  
      };
      api.onRequest(
        `$method.$set.${this.curTopic}.streamPull.ch.` + this.currentRow.index + ".siteName",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message)
          if (res.code == 0) {  
            this.notification("Success", "");
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }          
          ebus.emit('getStremPullInfo', this);   
        }.bind(this)
      );
    },
    drawCanvas () {
      var canvas = document.getElementById("sitename");
      var ctx = canvas.getContext("2d");
      // var ctx = getMyCanvas();
      ctx.fillStyle = "#000";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = this.siteName.fontSize + 'px sans-serif';
      ctx.textBaseline = "top";
      ctx.fillStyle = this.siteName.foreColor    
      
      var x = 0;
      if (this.siteName.pos.x < 0) {
        var posX = 0;
        var showLen = this.siteName.content.length * this.siteName.fontSize / 30;
        if (showLen < 100) {
          posX = (100 - showLen) / 2;
        }
        x = canvas.width * posX / 100;
      } else {
        x = canvas.width * this.siteName.pos.x / 100;
      }
      var y = canvas.height * this.siteName.pos.y / 100;
      ctx.fillText('Example', x, y);
    },
    subStatus() {
      api.onSubscribe(`$data.${this.curTopic}.streamPull.ch.0.status`, (msg) =>{
        console.error('push report 0:', msg)
      })
      api.onSubscribe(`$data.${this.curTopic}.streamPull.ch.1.status`, (msg) =>{
        console.error('push report 1:', msg)
      })
      api.onSubscribe(`$data.${this.curTopic}.streamPull.ch.2.status`, (msg) =>{
        console.error('push report 2:', msg)
      })
      api.onSubscribe(`$data.${this.curTopic}.streamPull.ch.3.status`, (msg) =>{
        console.error('push report 3:', msg)
      })
      api.onSubscribe(`$data.${this.curTopic}.streamPull.ch.4.status`, (msg) =>{
        console.error('push report 4:', msg)
      })
      api.onSubscribe(`$data.${this.curTopic}.streamPull.ch.5.status`, (msg) =>{
        console.error('push report 5:', msg)
      })
      
    }
  }
};
</script>

<style @scoped>
.span17 .el-slider, .span17 .el-input, .span17 .el-select {
  width: 50%;
  float: left;
  margin: 0;
}
.span17 .el-select .el-input {
  width: 100%;
}
</style>

